<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>菜品管理</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="lib/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>

<div class="container-fluid">

    <div class="app-title">
        <div>
            <h1><i class="fa fa-circle-o"></i> 菜品管理</h1>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><a href="welcome.html">首页</a></li>
            <li class="breadcrumb-item active">菜品管理</li>
        </ul>
    </div>

    <div class="tile" id="app">
        <!-- 工具栏 -->
        <p id="toolbar" class="form-inline">
            <input type="text" class="form-control mr-1" placeholder="菜品标题">
            <select class="form-control mr-1">
                <option value="">-- 菜品分类 --</option>
                <option value="1">火锅</option>
                <option value="2">凉菜</option>
                <option value="3">小炒</option>
                <option value="4">田园时蔬</option>
                <option value="5">酒水</option>
            </select>
            <button type="button" class="btn btn-outline-primary mr-1">
                <i class="fa fa-search"></i>搜索
            </button>
            <a href="dishes_add.html" class="btn btn-outline-success mr-1">
                <i class="fa fa-plus-square"></i>新增
            </a>
        </p>
        <!-- 数据表格 -->
        <table id="table" class="table table-bordered table-hover">
            <thead>
            <tr class="bg-light">
                <th>序号</th>
                <th>菜品标题</th>
                <th>菜品价格</th>
                <th>菜品图片</th>
                <th>菜品状态</th>
                <th>菜品分类</th>
                <th>创建时间</th>
                <th>修改时间</th>
                <th width="100">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="dishes in dishesList">
                <td>{{dishes.id}}</td>
                <td>{{dishes.name}}</td>
                <td>{{dishes.price}}</td>
                <td><img :src="dishes.image" height="50" alt=""></td>
                <td>
                    <span class="badge badge-primary" v-if="dishes.status===1">正常</span>
                    <span class="badge badge-secondary" v-else-if="dishes.status===2">售罄</span>
                </td>
                <td>{{dishes.catName}}</td>
                <td>{{dishes.created}}</td>
                <td>{{dishes.updated}}</td>
                <td>
                    <a class="text-info" href="dishes_update.html" title="修改"><i class="fa fa-lg fa-edit"></i></a>
                    <a class="text-danger" href="javascript:void(0)" title="删除" @click="doRemove(dishes)"><i
                            class="fa fa-lg fa-trash"></i></a>
                </td>
            </tr>
            </tbody>
        </table>

        <!--分页-->
        <ul class="pagination">
            <li class="page-item disabled"><a class="page-link">«</a></li>
            <li class="page-item active"><a class="page-link">1</a></li>
            <li class="page-item"><a class="page-link">»</a></li>
        </ul>
    </div>
    <!-- /.tile -->
</div>
<!-- /.container-fluid -->

<!-- Essential javascripts for application to work-->
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<!-- Page specific javascripts-->
<script src="js/plugins/select2.min.js"></script>
<script src="lib/layer/layer.js"></script>
<script src="lib/vue/vue.min.js"></script>
<script>
    // $("select").select2();

    let app = new Vue({
        el: "#app",
        data: {
            dishesList: [{
                id: 1,
                name: "黄焖鸡",
                price: 13,
                image: "images/dishes01.jpg",
                status: 1,
                catName: "火锅",
                created: "2020-03-15 20:05:09",
                updated: "2020-03-21 00:01:03"
            }, {
                id: 2,
                name: "土豆焖鸡",
                price: 15,
                image: "images/dishes02.jpg",
                status: 2,
                catName: "火锅",
                created: "2020-03-15 03:20:55",
                updated: "2020-03-21 00:01:21"
            }, {
                id: 3,
                name: "青椒炒肉",
                price: 18,
                image: "images/dishes03.jpg",
                status: 1,
                catName: "小炒",
                created: "2020-03-15 20:05:51",
                updated: "2020-03-21 00:10:06"
            }]
        },
        methods: {
            doRemove(row) {
                layer.confirm("删除操作无法恢复，您确定要删除吗?", function () {
                    layer.msg("已删除~");
                });
            }
        }
    });
</script>

</body>
</html>